<template>
	<view
		class="content"
		@touchstart="touchStart"
		@touchend="touchEnd"
	>
		<view
			class="pages"
			v-show="!isLoading"
		>
			<view
				class="navigation"
				style="height: 44px; width: 750rpx"
			></view>
			<view class="nav">
				<!-- <NavVue></NavVue> -->
			</view>
			<view
				class="search"
				style="margin-top: 40rpx"
			>
				<view class="personCenter">
					<i class="certishare-icon">
						<span>&#xe60c;</span>
					</i>
				</view>
				<u-search
					placeholder="请输入关键词啊啊"
					action-text=""
					:disabled="true"
					@click="goToSearch"
					width="100%"
				></u-search>
			</view>
			<view class="swiper-img">
				<SwiperVue :imgList="imgList"></SwiperVue>
			</view>

			<view class="index">
				<cardPageVue></cardPageVue>
			</view>
			<div
				class="tabbar"
				v-show="showTabbar"
			>
				<TabBarVue></TabBarVue>
			</div>
		</view>
		<view
			class="loaders"
			v-show="isLoading"
		>
			<loaderVue></loaderVue>
			<view class="loading-text">
				<span>数据正在赶来的路上,稍安勿躁,稍安勿躁.....</span>
			</view>
		</view>
	</view>
</template>

<script>
import NavVue from '../../components/index/nav/Nav.vue';
import SwiperVue from '../../components/index/Swiper/Swiper.vue';
import TabBarVue from '../../components/index/TabBar.vue';
import getQiniuToken from '@/common/api/qiniu.js';
import cardPageVue from '../../components/index/card-list/card-page.vue';
import { getAllCarousels } from '@/common/api/find.js';
import { getCard } from '@/common/api/cardApi.js';
import loaderVue from '../../components/loader/loader.vue';

export default {
	components: {
		TabBarVue,
		NavVue,
		SwiperVue,
		cardPageVue,
		loaderVue
	},
	data() {
		return {
			isLoading: false, // 控制tabbar的显示与隐藏
			showTabbar: true,
			scrollDirection: 'down', //向下的渐隐
			touchStartX: 0, // 触屏起始点x
			touchStartY: 0, // 触屏起始点y,
			cardList: [],
			currentPage: 1,
			itemsPerPage: 10,
			loadedData: {},
			imgList: []
		};
	},
	computed: {},
	onLoad() {},
	methods: {
		goToSearch() {
			uni.navigateTo({
				url: '/pages/Search/Search',
				animationType: 'slide-in-right',
				animationDuration: 200
			});
		},
		//开始触摸屏幕
		touchStart(e) {
			this.touchStartX = e.touches[0].clientX;
			this.touchStartY = e.touches[0].clientY;
		},
		//结束触摸屏幕
		touchEnd(e) {
			let deltaX = e.changedTouches[0].clientX - this.touchStartX;
			let deltaY = e.changedTouches[0].clientY - this.touchStartY;
			if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) {
				if (deltaY < 0) {
					console.log('往上滑动了');
				} else {
					this.showTabbar = true;
				}
			}
		},
		hideLoading() {
			this.isLoading = false;
		},
		showLoading() {
			this.isLoading = true;
		},
		parseData(data) {
			const imageUrls = [];
			const titles = [];
			for (const item of data) {
				if (item.images && item.images.length > 0) {
					imageUrls.push(item.images[0].imageUrl);
				}
				if (item.title) {
					titles.push(item.title);
				}
			}

			return { imageUrls, titles };
		},
		getAllCarousels() {
			const that = this;
			getAllCarousels().then((res) => {
				const arrs = this.parseData(res.data);
				this.imgList = arrs.imageUrls;
			});
		}
	},

	async mounted() {
		// await this.init();
		uni.$on('showLoading', this.showLoading);
		uni.$on('hideLoading', this.hideLoading);
		uni.$emit('initCardPage');
		this.getAllCarousels();
	},
	async onPullDownRefresh() {
		uni.$emit('reLoad');
		uni.stopPullDownRefresh();
	},
	onReachBottom() {
		this.showTabbar = false;
		uni.$emit('isBottom');
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 750rpx;
	height: 100vh;
	.pages {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		.nav {
			width: 750rpx;
			height: 44px;
			margin-top: 44rpx;
		}

		.index {
			width: 100%;
		}

		.tabbar {
			position: fixed;
			top: 90%;
			left: 50%;
			transform: translate(-50%, -50%);
			opacity: 1;
			transition: opacity 0.3s;

			&.tabbar-hidden {
				opacity: 0;
			}

			&.tabbar-fade-down {
				transform: translateX(-50%) translateY(100%);
			}

			&.tabbar-fade-up {
				transform: translateX(-50%) translateY(0);
			}
		}

		.search {
			width: 750rpx;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-left: 100rpx;
			.personCenter {
				i {
					width: 32px;
					height: 32px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					color: #fff;
					font-weight: 700;
					span {
						font-size: 30px;
						color: #fff;
					}
				}
			}
		}

		.swiper-img {
			margin: 20rpx auto;
			width: 684rpx;
		}
	}
	.loaders {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 0%;
		left: 0%;
		background-color: #fff;
		.loading-text {
			margin-top: 60rpx;
			span {
				font-size: 12px;
				font-family: 'Source Han Sans SC Normal';
			}
		}
	}
}
@keyframes Move {
	0% {
		left: 0%;
	}

	100% {
		left: 100%;
		opacity: 0;
	}
}
</style>
